import React from 'react';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';

const getOption = data => {
    const option = {
        title: {
            text: '各环节平均周期',
            x: 'left'
        },
        tooltip: {
            formatter: '{a}:{c}'
        },
        legend: {
            top: 30,
            data: data.map(item => item.name)
        },
        grid: {
            top: 100,
            left: 20,
            right: 20,
            bottom: 30,
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'category',
            data: ['Rate']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 'auto'
            },
            splitNumber: 5
        },
        series: data.map(item => ({
            data: [item.value],
            name: item.name,
            type: 'bar'
        }))
    };
    return option;
};

const SjxlChart = ({ data }) => (
    <div>
        {!data || data.length === 0 ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: '127px 0' }} />
        ) : (
            <ReactEcharts option={getOption(data)} />
        )}
    </div>
);

export default SjxlChart;
